<template>
	<div class="container">
		<el-row>
			<el-col :span="8" :offset="16" class="tr">
				<el-button type="primary" @click="handleCreateDevices">
					<span class="iconfont">&#xe676;</span>新增存储设备
				</el-button>
				<el-button type="primary" @click="dialogFormVisible2 = true;dialogStatusArea='create'">
					<span class="iconfont">&#xe676;</span>新增存储域
				</el-button>
			</el-col>
		</el-row>
		<my-table :table-data="tableData" :col-configs="colConfigs" :list-loading="listLoading" :total="total"
			:page-size="listQuery.pagesize" @refreshList="getList" :isExpand="true" :isExpandOne="true"
			@handleExpandRow="handleExpandRow">
			<el-table-column slot="opt" label="操作" width="80px">
				<template slot-scope="scope">
					<span class="iconfont bg-edit" @click="handleEditDevices(scope)">&#xe679;</span>
					<span class="iconfont bg-stop" v-if="scope.row.is_enable === false" @click="handleStop(scope)">&#xe682;</span>
					<span class="el-icon-circle-check iconfont bg-check" v-if="scope.row.is_enable === true"
						@click="handleStop(scope)"></span>
				</template>
			</el-table-column>
			<el-table-column slot="device_type" label="设备类型">
				<template slot-scope="{row}">
					<span v-if="row.device_type === 0">亚马逊S3</span>
					<span v-if="row.device_type === 1">阿里云OSS</span>
					<span v-if="row.device_type === 2">华为云OSS</span>
					<span v-if="row.device_type === 3">腾讯云OSS或联通云OSS</span>
					<span v-if="row.device_type === 4">电信云OSS</span>
					<span v-if="row.device_type === 5">移动云OSS</span>
					<span v-if="row.device_type === 6">NAS存储</span>
					<span v-if="row.device_type === 7">SAN本地存储</span>
				</template>
			</el-table-column>
			<!--展开的列表-->
			<template slot="expand">
				<my-table :table-data="tableDataDetail" :col-configs="colConfigs2" :total="totalDetail"
					:page-size="listQueryDetail.pagesize" :list-loading="listLoading" @refreshList="getDetail">
					<el-table-column slot="opt" label="操作" width="50px">
						<template slot-scope="{ row }">
							<span class="iconfont bg-edit" @click="handleEditDomain(row)">&#xe679;</span>
						</template>
					</el-table-column>
				</my-table>
			</template>
		</my-table>
		<el-dialog :title="textMap[dialogStatusTitle]" :visible.sync="dialogFormVisible" width="41%">
			<el-form :model="addFormData" label-width="120px" :label-position="labelPosition" ref="addDeviceForm"
				:rules="addrules">
				<el-form-item prop="device_type" label="存储类型">
					<el-select v-model="addFormData.device_type" placeholder="请输入存储类型" clearable :disabled="isDisabled"
						@change="handleShowCloud">
						<el-option v-for="(item,index) in deviceTypeList" :key="index" :label="item.label" :value="item.type">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="device_name" label="存储设备名称">
					<el-input v-model="addFormData.device_name" placeholder="存储设备名称" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="device_size" label="容量大小">
					<el-input v-model="addFormData.device_size" autocomplete="off" placeholder="请输入容量大小"></el-input>
				</el-form-item>
				<el-form-item prop="device_path" label="路径">
					<el-input v-model="addFormData.device_path" placeholder="请输入路径" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="device_host" label="存储设备主机" v-if="show_cloud === true">
					<el-input v-model="addFormData.device_host" placeholder="请输入存储设备主机" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item prop="access_id" label="访问ID" v-if="show_cloud === true">
					<el-input v-model="addFormData.access_id" autocomplete="off" placeholder="请输入访问ID"></el-input>
				</el-form-item>
				<el-form-item prop="access_key" label="访问KEY" v-if="show_cloud === true">
					<el-input v-model="addFormData.access_key" autocomplete="off" placeholder="请输入访问KEY"></el-input>
				</el-form-item>
				<!--
				<el-form-item prop="region" label="子目录">
					<el-input v-model="addFormData.name" autocomplete="off" placeholder="请输入子目录"></el-input>
				</el-form-item>
				<el-form-item prop="region" label="使用机构">
					<el-select v-model="addFormData.region" placeholder="请输入使用机构">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				-->
				<el-form-item prop="region" label="备注">
					<el-input v-model="addFormData.name" placeholder="请输入备注" :rows="5" type="textarea" autocomplete="off">
					</el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="handleAddDevices">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog :title="textMapArea[dialogStatusArea]" :visible.sync="dialogFormVisible2" width="41%">
			<el-form :model="addFormData2" label-width="120px" :label-position="labelPosition" ref="addFormData_domains"
				:rules="addrules_area">
				<el-form-item prop="domain_name" label="存储域名称">
					<el-input v-model="addFormData2.domain_name" placeholder="请输入存储域名称" autocomplete="off"></el-input>
				</el-form-item>
				<!--
				<el-form-item label="医疗机构">
					<el-select v-model="addFormData2.region" multiple placeholder="请选择医疗机构(多选)">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				-->
				<el-form-item prop="domain_ids" label="对应存储设备" multiple>
					<el-select v-model="addFormData2.domain_ids" placeholder="请选择对应存储设备(多选)" multiple collapse-tags>
						<el-option v-for="(item,index) in tableData" :key="index" :label="item.device_name" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<!--
				<el-form-item label="业务系统">
					<el-select v-model="addFormData2.region" placeholder="请选择业务系统(多选)">
						<el-option label="区域一" value="shanghai"></el-option>
						<el-option label="区域二" value="beijing"></el-option>
					</el-select>
				</el-form-item>
				-->
				<el-form-item label="分配容量" props="domain_size">
					<el-input v-model="addFormData2.domain_size" placeholder="请输入分配容量" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible2 = false">取 消</el-button>
				<el-button type="primary" @click="handleSubmitArea">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
import { getAllDevice, getDetail, addDevice, editDevice, deleteDevice, getDeviceByorg, get_relate_domains, updateDomains, createDomain } from '@/api/admin/store.js'
import myTable from '@/components/myTable'

export default {
	components: { myTable },
	data () {
		return {
			show_cloud: true,
			show_cloud_nasa: true,
			isDisabled: false,
			labelPosition: 'right',
			labelWidth: '120',
			dialogFormVisible: false,
			dialogFormVisible2: false,
			addFormData: {
				device_type: null,
				device_name: null,
				device_size: null,
				device_path: null,
				device_host: null,
				access_id: null,
				access_key: null,
				// todo 备注
			},
			addFormData2: {
				'domain_name': null,
				'domain_size': null,
				'domain_device': [],
				'domain_ids': []
			},
			addrules: {
				device_name: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				device_type: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				device_size: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				access_id: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				access_key: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				device_path: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				device_host: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
			},
			addrules_area: {
				domain_name: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],
				domain_ids: [
					{
						required: true,
						message: '此项为必填项',
						trigger: 'change'
					}
				],

			},
			listQuery: {
				pagesize: 10,
				pageindex: 1,
			},
			listQueryDetail: {
				pagesize: 10,
				pageindex: 1,
				id: null
			},
			colConfigs: [
				// todo 字段缺失
				{
					type: 'index',
					label: '序号',
					width: '50px'
				},
				{ slot: 'opt' },

				{
					slot: 'device_type'
				},
				{
					prop: 'device_name',
					label: '设备名称',
				},
				{
					prop: 'device_host',
					label: '设备主机',
					width: '300px'
				},
				{
					prop: 'device_path',
					label: '路径',
				},
				/* {
					prop: '',
					label: '子目录',
				},
				{
					prop: '',
					label: '使用机构',
				}, */
				{
					prop: 'create_user_name',
					label: '创建人',
				},
				{
					prop: 'create_time',
					label: '创建时间',
					width: '180px'
				},
				{
					prop: 'device_size',
					label: '总容量（T）',
					width: '100px'
				},
				{
					prop: 'used_size',
					label: '已使用容量',
					sort: true,
				},
			],
			colConfigs2: [
				// todo 字段缺失
				{
					type: 'index',
					label: '序号',
					width: '50px'
				},
				{ slot: 'opt', },
				{
					prop: 'domain_name',
					label: '存储域名称',
				},
				{
					prop: 'domain_size',
					label: '已分配容量(T)',
				},
				{
					prop: 'used_size',
					label: '已使用容量(T)',
				},
				{
					prop: 'depart_name',
					label: '当前使用状态',
				},
				{
					prop: 'create_user_name',
					label: '创建人',
				},
				{
					prop: 'create_time',
					label: '创建时间',
					sort: true,
				},
			],
			tableData: [
			],
			tableDataDetail: [],
			totalDetail: 0,
			total: null,
			listLoading: false,
			textMap: {
				update: '编辑存储设备',
				create: '新增存储设备',
			},
			dialogStatusTitle: 'create',
			textMapArea: {
				update: '编辑存储域',
				create: '新增存储域',
			},
			dialogStatusArea: 'create',
			deviceTypeList: [
				{ label: '亚马逊S3', type: 0 },
				{ label: '阿里云OSS', type: 1 },
				{ label: '华为云OSS', type: 2 },
				{ label: '腾讯云OSS或联通云OSS', type: 3 },
				{ label: '电信云OSS', type: 4 },
				{ label: '移动云OSS', type: 5 },
				{ label: 'NAS存储', type: 6 },
				{ label: 'SAN本地存储', type: 7 },
			]
		}
	},
	mounted () {
		this.getList()
	},
	methods: {
		getList ( val ) {
			let params = Object.assign( this.listQuery, val )
			//  todo 分页
			getAllDevice( params ).then( res => {
				if ( res.code === 0 ) {
					this.tableData = res.data
					this.total = res.page.total_count
				}
			} )
		},
		getDetail () {
			// 获取相关的存储域
			get_relate_domains( { id: this.listQuery.id } ).then( res => {
				this.tableDataDetail = res.data
				// this.totalDetail = res.page.total_count
			} )
		},
		handleCreateDevices () {
			// 新增存储设备
			this.isDisabled = false
			this.dialogFormVisible = true
			this.dialogStatusTitle = 'create'
			this.$nextTick( () => {
				this.$refs[ 'addDeviceForm' ].resetFields()
				this.$refs[ 'addDeviceForm' ].clearValidate()
			} )
		},
		handleEditDevices ( scope ) {
			this.addFormData = scope.row
			this.dialogStatusTitle = 'update'
			this.dialogFormVisible = true
			this.isDisabled = true
			this.$nextTick( () => {
				this.$refs[ 'addDeviceForm' ].clearValidate()
				this.handleShowCloud()
			} )
		},
		handleAddDevices () {
			// 新增编辑
			if ( this.dialogStatusTitle === 'create' ) {
				// 新增
				this.$refs[ 'addDeviceForm' ].validate( ( valid ) => {
					if ( valid ) {
						// todo 缺字段
						addDevice( this.addFormData ).then( res => {
							if ( res.code === 0 ) {
							// 	this.$message.success( '添加成功' )
								// this.tabledata.unshift( this.addFormData )
								this.getList()
								this.dialogFormVisible = false
								// todo 重置表单
								// 表单重置
								this.$nextTick( () => {
									this.$refs[ 'addDeviceForm' ].resetFields()
								} )
							} else {
								this.$message.fail( '添加失败,请重试' )
							}
						} )
					} else {
						console.log( 'error submit!!' );
						return false;
					}
					console.log( this.addFormData );
				} )

			} else {
				this.$refs[ 'addDeviceForm' ].validate( ( valid ) => {
					if ( valid ) {
						// todo 缺字段
						editDevice( this.addFormData ).then( res => {
							if ( res.code === 0 ) {
							// 	this.$message.success( '修改成功' )
								this.dialogFormVisible = false
								/* const index = this.tableData.findIndex( v => v.access_id === this.temp.id )
								this.tableData.splice( index, 1, this.addFormData ) */
								this.getList()
								// 表单重置
								this.$refs[ 'addDeviceForm' ].resetFields()
							} else {
								this.$message.fail( '修改失败,请重试' )
							}
						} )
					} else {
						console.log( 'error submit!!' );
						return false;
					}
				} )
			}
		},
		handleSubmitArea () {
			//todo  存储域新增或编辑
			console.log( this.addFormData2 );
			const ids = this.addFormData2.domain_ids,
				params = []

			if ( ids.length > 0 ) {
				ids.map( item => {
					this.tableData.map( ite => {
						if ( ite.id === item ) {
							params.push( { domain_name: ite.device_name, device_id: item } )
						}
					} )
				} )
			}
			const data = {
				'domain_name': this.addFormData2.domain_name,
				'domain_size': this.addFormData2.domain_size,
				'domain_device': params,
			}
			console.log( params );
			if ( this.dialogStatusTitle === 'create' ) {
				// 新增存储域
				this.$refs[ 'addFormData_domains' ].validate( ( valid ) => {
					if ( valid ) {
						createDomain( data ).then( res => {
							if ( res.code === 0 ) {
							// 	this.$message.success( '添加成功' )
								this.getList()
								this.dialogFormVisible2 = false
								// 表单重置
								this.$refs[ 'addFormData_domains' ].resetFields()
							} else {
								this.$message.fail( res.msg )
							}
						} )
					} else {
						console.log( 'error submit!!' );
						return false;
					}
				} )

			} else {
				this.$refs[ 'addFormData_domains' ].validate( ( valid ) => {
					if ( valid ) {
						// 修改存储域
						updateDomains( data ).then( res => {
							if ( res.code === 0 ) {
							// 	this.$message.success( '修改成功' )
								this.dialogFormVisible2 = false
								this.getList()
								// 表单重置
								this.$refs[ 'addFormData_domains' ].resetFields()
							} else {
								this.$message.fail( res.msg )
							}
						} )
					} else {
						console.log( 'error submit!!' );
						return false;
					}
				} )
			}
		},
		handleExpandRow ( row ) {
			// z展开数据
			this.listQuery.id = row.id
			this.getDetail()
		},

		handleStop ( { $index, row } ) {
			// 修改状态
			if ( row.is_enable === true ) {
				// 禁用
				this.$confirm( '确定启用?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				} )
					.then( async () => {
						const params = {
							id: row.id,
							is_enable: false
						}
						editDevice( params ).then( res => {
							if ( res.code === 0 ) {
								this.$message( {
									type: 'success',
									message: res.msg,
								} )
								row.is_enable = false
							}
						} )
					} )
					.catch( err => {
						console.error( err )
					} )
			} else {
				// 启用状态
				this.$confirm( '确定禁用?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				} )
					.then( async () => {
						const params = {
							id: row.id,
							is_enable: true
						}
						editDevice( params ).then( res => {
							if ( res.code === 0 ) {
								this.$message( {
									type: 'success',
									message: res.msg,
								} )
								row.is_enable = true
							}
						} )
					} )
					.catch( err => {
						console.error( err )
					} )
			}

		},
		handleShowCloud () {
			// 显示隐藏
			if ( this.addFormData.device_type === 7 ) {
				this.show_cloud = false
			} else {
				this.show_cloud = true
			}
		},
		handleEditDomain ( row ) {
			//todo 编辑存储域
			this.dialogFormVisible2 = true;
			this.dialogStatusArea = 'create'
			let id = []
			this.deviceTypeList.map( item => {
				if ( item.label === row.device_name ) {
					id.push( item.type )
				}
			} )
			this.addFormData2 = {
				domain_size: row.domain_size,
				domain_ids: id,
				domain_name: row.domain_name,
				id: row.id,
			}
			console.log( this.addFormData2 );
		}
	},
}
</script>
<style scoped lang="less">
.container {
	.tr {
		font-size: 14px;
	}
	.cell {
		.el-button {
			padding: 0;
		}
	}
	.stop {
		color: #b56e10;
	}
	// .el-input {
	//   width: 420px;
	// }
	// .el-dialog__body {
	//   width: 690px !important;
	// }
	.el-select {
		width: 100%;
	}
}
</style>
